{extend name="public/layout" /}
{block name="body"}
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <table id="admin-table" lay-filter="data-list"></table>
            </div>
        </div>
    </div>
{/block}
{block name="script"}
    <script src="/static/admin/js/action.js?v={$version}"></script>
    <script type="text/html" id="toolbar">
        <div class="table-input-text">
            <select class="layui-select" id="location_id">
                <option value="0">请选择打卡地点</option>
                {foreach name="location" item="item"}
                    <option value="{$item.id}">{$item.name}</option>
                {/foreach}
            </select>
        </div>
        <input class="layui-input table-input-text" id="search"  placeholder="用户搜索" value="">
        <a class="layui-btn" lay-event="search" >搜索</a>
    </script>

    <script>
        layui.use('table', function(){
            var table = layui.table;
            $ = layui.$;
            table.render({
                elem: '#admin-table'
                ,url: '{:url('index')}'
                ,page: true
                ,toolbar: '#toolbar'
                ,defaultToolbar:['filter']
                ,loading:true
                ,autoSort:false
                ,cols: [[
                    {field: 'id', title: 'ID',sort:true}
                    ,{field: 'user', title: '打卡用户'}
                    ,{field: 'location', title: '打卡地点'}
                    ,{field: 'add_time', title: '打卡时间'}
                ]]
                ,parseData: function(res){
                    return {
                        "code": res.code,
                        "msg": res.message,
                        "count": res.data.total,
                        "data": res.data.data
                    };
                }
                ,response: {
                    statusCode: 10000 //规定成功的状态码，默认：0
                }
            });

            //行内元素事件
            table.on('tool(data-list)', function(obj){
                if(obj.event === 'detail'){
                    window.location.href = "{:url('detail')}?id="+obj.data.id;
                } else if(obj.event === 'del'){
                    del(layer,$,'{:url('delete')}',obj)
                }
            });

            //左上角按钮事件
            table.on('toolbar(data-list)', function(obj){
                switch(obj.event){
                    case 'search':
                        var key = $('#search').val();
                        var location_id = $('#location_id').val();
                        table.reload('admin-table', {
                            url: '{:url('index')}'
                            ,where: {keyword: key,location_id:location_id}
                        });
                        break;
                };
            });

            //监听排序事件
            table.on('sort(data-list)', function(obj){
                table.reload('admin-table', {
                    initSort: obj
                    ,url: '{:url('index')}'
                    ,where: {'order': obj.field + ' ' + obj.type}
                });
            });
        });
    </script>
{/block}